import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex); //把vuex注入到所有的子组件
import * as api from "../api";
import allRoutes from "../router/allRoutes";//引入所有的路由配置
import dynamicRoutes from '@/router/dynamicRoutes' //动态路由
import recursionRoutes from '@/utils/recursionRoutes' //递归计算用户路由的方法
import router from "../router";

let userInfo = localStorage.getItem("qf-userInfo") || "{}"
let currentChargeProduct = localStorage.getItem("qf-currentChargeProduct") || "[]"
export default new Vuex.Store({
  //strict:true,//只是警告一下不要在mutation以外的处理函数中修改state
  //vuex的五大核心
  state: {
    userInfo: JSON.parse(userInfo),//用户信息
    sideMenu: [],//侧边栏菜单
    breadCrumb: [],//面包屑数据
    dialogVisible: false,//控制dialog显示隐藏的值
    dialogTitle: "增加学员信息",//控制dialog的标题
    stuData: [],
    // 表格加载动画控制
    loading: true,
    //编辑的时候,dialog回显的表格数据
    currentRow: {},
    stuTotal: 0,//总条目
    stuPageSize: 10,//每页显示的数量
    //订单
    orderData: [],
    //当前充值的产品
    currentChargeProduct: JSON.parse(currentChargeProduct),
    //订单id
    order_id:""
  }, //状态
  mutations: {
    //表格显示loading动画
    SHOW_LOADING(state) {
      state.loading = true;
    },
    //表格隐藏loading动画
    HIDE_LOADING(state) {
      state.loading = false;
    },
    //设置学员项目管理表格中的数据
    SET_STU_DATA(state, payload) {
      state.stuData = payload.data;//设置学员列表
      state.loading = false;//关闭加载动画
      state.stuTotal = payload.total;//设置学员分页总数
    },
    //显示diglog
    SHOW_DIALOG(state) {
      state.dialogVisible = true;
    },
    //隐藏dialog
    HIDE_DIALOG(state) {
      state.dialogVisible = false
    },
    //修改dialog标题
    CHANGE_DIALOG_TITLE(state, payload) {
      state.dialogTitle = payload;
    },
    //保存用户信息
    SET_USER_INFO(state, payload) {//设置用户信息
      state.userInfo = payload;
    },
    SET_MENULIST(state, payload) { //设置菜单
      // state.sideMenu = payload;
      // console.log(state.sideMenu)
      //将用户路由动态的添加到router的配置routes中
      //将用户路由添加到dynamicRoutes中的"/"路径那个配置中的children属性中
      let target = dynamicRoutes.find(item => item.path === "/");
      // console.log(target)

      target.children = [...payload, ...target.children];
      //要将用户路由动态的添加到我们的项目之中
      // console.log(dynamicRoutes)
      router.addRoutes(dynamicRoutes)
      //核心方法就是router.addRoutes([])
      //预支付订单页面不需要展示在菜单栏
      //要排除不需要展示在菜单中的页面 pre_order payment
      let excludeRoutes = ["pre_order", "payment"]

      target.children = target.children.filter(item => !excludeRoutes.includes(item.path))

      state.sideMenu = target.children;

    },
    SET_BREADCRUMB(state, payload) {//设置面包屑🍞;
      state.breadCrumb = payload;
    },
    //修改dialog回显数据
    SET_CURRENT_ROW(state, payload) {
      state.currentRow = { ...payload }
    },
    //设置订单数据
    SET_ORDER_DATA(state, payload) {
      state.orderData = payload
    },
    //设置当前充值的产品
    SET_CURRENT_CHARGE_PRODUCT(state, payload) {
      state.currentChargeProduct = [payload];
      //再存一份到localStorage中
      localStorage.setItem('qf-currentChargeProduct', JSON.stringify([payload]))
    },
    //设置订单id
    SET_ORDER_ID(state,payload){
      state.order_id = payload;
    }

  }, //修改状态的方法
  getters: {

  },
  actions: {
    //获取用户菜单
    async GET_MENULIST({ commit }) {
      console.log('action执行了')
      //用于获取服务器中当前用户的菜单
      let res = await api.getMenulistApi();
      let { menuList } = res.data;
      //使用recursionRoutes方法,计算出用户的路由,提交给mutation
      let userRoutes = recursionRoutes(menuList, allRoutes)
      commit("SET_MENULIST", userRoutes)
    },
    //获取学员列表
    GET_STULIST({ commit }, payload = {}) {
      commit("SHOW_LOADING")//打开加载动画
      let { page = 1, count = 10, classes = "" } = payload;//解构传递的参数
      api.getStuListApi(page, count, classes)
        .then(res => {
          commit("SET_STU_DATA", res.data)
        })
    },
    //获取订单数据
    GET_ORDER_DATA({ commit }, payload) {
      let order_id = payload || "";
      api.getOrderApi(order_id)
        .then(res => {
          console.log(res.data)
          if (res.data.state) {
            console.log(res.data.data)
            commit("SET_ORDER_DATA", res.data.data)
          } else {
            this.$message.error("获取订单失败")
          }
        })
    }
  },
  modules: {}, //模块化
});
